<template>
<div id="activity" class="content-block content">
    <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <swiper loop auto height="30px" direction="vertical" :interval=2000 class="text-scroll" :show-dots="false">
      <swiper-item><p>博羸兄弟----博羸兄弟读书会</p></swiper-item>
      <swiper-item><p>博羸兄弟----飞雷开源项目</p></swiper-item>
      <swiper-item><p>博羸兄弟----不忘初心</p></swiper-item>
    </swiper>
    <group>
      <cell is-link value="更多" >
        <span slot="title" style="color:rgb(216, 65, 65)"><span style="vertical-align:middle;">读书</span></span>
      </cell>
    </group>

    <grid :rows="2">
      <grid-item v-for="i in 2" :key="i">
        <div class="activity-info" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498377657432&di=3c88ee6faafa397ce0e5f22d3c9250ec&imgtype=0&src=http%3A%2F%2Ffe.topitme.com%2Fe%2F1e%2F41%2F1123162901b2c411eeo.jpg);">
          博羸兄弟读书会
        </div>
      </grid-item>
    </grid>
    <group>
      <cell is-link value="更多">
        <span slot="title" style="color:rgb(216, 65, 65)"><span style="vertical-align:middle;">社团</span></span>
      </cell>
    </group>
    <grid :rows="2">
      <grid-item v-for="i in 2" :key="i">
        <div class="activity-info" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498371853471&di=1ac1aab9cd15bcd5c675cbdf14f5f0a9&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2014%2F1217%2F1216wyxqxtpgpsjzm3.jpg);">
          飞雷开源项目
        </div>
      </grid-item>
    </grid>
    
  </div>
</template>

<script>
import { Swiper, GroupTitle, SwiperItem, XButton, Divider, Grid, GridItem, Cell, Group } from 'vux'

const baseList = [{
  url: 'javascript:',
  img: 'http://pic6.wed114.cn/20130421/20130421234458107.JPG',
  title: '缘来在当地'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '使人成熟的是经历，而不是岁月'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '绝口不提不是因为忘记，而是因为铭记'
}]

const imgList = [
  'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
  'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
  'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
]

const urlList = baseList.map((item, index) => ({
  url: 'http://m.baidu.com',
  img: item.img,
  title: `${item.title}`
}))

const demoList = imgList.map((one, index) => ({
  url: 'javascript:',
  img: one
}))

const only2ClickList = baseList.slice(0, 2).map(item => {
  item.url = 'http://m.baidu.com'
  return item
})

export default {
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
    Grid,
    GridItem,
    Cell,
    Group
  },
  mounted () {
  },
  methods: {
    onSwiperItemIndexChange (index) {
      console.log('demo item change', index)
    },
    demo01_onIndexChange (index) {
      this.demo01_index = index
    },
    demo05_onIndexChange (index) {
      this.demo05_index = index
    },
    demo05_onLoad (id) {
      this.demo05_list = id === 1 ? baseList : demoList
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index
    },
    demo07_onIndexChange (index) {
      this.demo07_index = index
    }
  },
  data () {
    return {
      demo01_list: baseList,
      demo02_list: demoList,
      demo03_list: demoList,
      demo04_list: imgList,
      demo05_list: [],
      demo06_list: urlList,
      demo07_list: only2ClickList,
      demo01_index: 0,
      demo02_index: 1,
      demo05_index: 0,
      demo06_index: 0,
      demo07_index: 0,
      swiperItemIndex: 1
    }
  }
}
</script>

<style scoped>

.weui-grid {
    position: relative;
    float: left;
    padding: 5px !important;
    width: 33.33333333%;
    box-sizing: border-box;
}

.activity-logo{
  height:128px;
  width:128px;
}
.activity-info{
  text-align:center;
  background-position: center;
  height: 128px;
  line-height:128px;
  color: #10c5b6;
  background-attachment: fixed;
  background-repeat:no-repeat; 
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}

.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}

</style>
